<template>
  <div class="addCommit">
<!--顶部-->
    <a-steps :current="current" class="stepsAdd">
      <a-step v-for="item in steps" :key="item.title" :title="item.title" />
    </a-steps>
<!--内容区域-->
    <div class="steps-content">
      <div class="content-size">
        <router-view></router-view>
      </div>
    </div>
<!--底栏-->
    <div class="steps-action">
      <a-button v-if="current < steps.length - 1" type="primary" @click="next">
        Next
      </a-button>
      <a-button
          v-if="current == steps.length - 1"
          type="primary"
          @click="$message.success('Processing complete!')"
      >
        Done
      </a-button>
      <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
        Previous
      </a-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //下一步
      current: 0,
      //下一步标题
      steps: [
        {
          title: 'First',
          content: 'First-content',
        },
        {
          title: 'Second',
          content: 'Second-content',
        },
      ],
    };
  },
  methods: {
    //点击下一步
    next() {
      this.current++;
    },
    //点击返回上一部
    prev() {
      this.current--;
    },
  },
};
</script>
<style scoped lang="less">
.steps-content {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
}

.steps-action {
  margin-top: 24px;
}
.addCommit{
  margin-top: 50px;
  .stepsAdd{
    margin-left: -25%;
  }
}

//输入框
.content-size{
  width: 60%;
  margin: 0 auto;
}
</style>
